<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>搜索测试</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<style type="text/css">
		.tips {
    padding-right: 20px;
    color: red;
}
	</style>
	<body>
		<center>
		<form action="" method="">
			<div class="mui-input-row mui-search">
				<input type="search" name="keyword" id="keyword" class="mui-input-clear" placeholder="">
			</div>
			
		</form>
		
		<button type="button" onclick="search_ajax()">搜索</button>
		<h2>搜索结果</h2>
		<div id="content">
			<p><span class="tips">热搜词:</span>
			<span id="hotkeyword">
			
			</span>
			</p>
			<p><span class="tips">分类页面匹配:</span>
				<span id="category">
					
				</span>
			</p>
			<p><span class="tips">CMS页面匹配:</span>
				<span id="cms">
				
				</span>
			</p>
			</p>
			<p><span class="tips">tag页面匹配:</span><span id="tag"></span></p>
			<p><span class="tips">产品页面匹配:</span><span id="product"></span></p>
		</div>
		</center>
		<script type="text/javascript">
			function search_ajax(){
				var key= $('#keyword').val();
				$.post("http://fadmin.uni.com/api/search/search_ajax.html",{key:key},function(res){
					
					var obj = $.parseJSON(res);
					 
					//[] 括起来的 json 转换后 需要使用 [0] 数组索引调用 {} 则正常的对象调用 .即可
					//解析热搜词
					if(obj.hotkeyword !=''){
							var hotkeyword  =$.parseJSON(obj.hotkeyword);
							
							var hotkeyword =hotkeyword[0].association.split(',');  //拆分热搜词association
							
							var string =  '';//拼接热搜词
						/* 	hotkeyword.forEach(function(value,index,array){
								string += value;
								
							}); */
							//或者 遍历数组
							$.each(hotkeyword,function(index,value,array){
								
								string += '热搜词'+index +'-' +value + ';';
							});
							$("#hotkeyword").html(string);
					}else{
						$("#hotkeyword").html('无结果');
					}
					
					if(obj.category !=''){
						var category  =$.parseJSON(obj.category);
						var string =  '';//拼接热搜词
					
						$.each(category,function(index,objitem,array){
							
							string += '<a href="'+objitem.link +'">'+objitem.keywords + '</a><br>';
						});
						$("#category").html(string);
						
						
					}else{
						$("#category").html('无结果');
						
					}
					if(obj.cms !=''){
						var cms  =$.parseJSON(obj.cms);
						var string =  '';//拼接热搜词
					
						$.each(cms,function(index,objitem,array){
							
							string += '<a href="'+objitem.meta_title +'">'+objitem.url + '</a><br>';
						});
						$("#cms").html(string);
						
						
						
					}else{
						
						$("#cms").html('无结果');
					}
					if(obj.tag !=''){
						
						var tag  =$.parseJSON(obj.tag);
						var string =  '';//拼接热搜词
					
						$.each(tag,function(index,objitem,array){
							
							string += '<a href="'+objitem.name +'">'+objitem.url + '</a><br>';
						});
						$("#tag").html(string);
						
						
					}else{
						
						$("#tag").html('无结果');
					}
					if(obj.product !=''){
						
						
						
						
					}else{
						
						$("#product").html('无结果');
					}
					});
				
				
			}
		</script>
	</body>
</html>